<!doctype html>
<html>
     <head>
          <meta charset="utf-8" />
          <title>iconfont Demo</title>
          <link
               rel="shortcut icon"
               href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
               type="image/x-icon"
          />
          <link
               rel="icon"
               type="image/svg+xml"
               href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
          />
          <link
               rel="stylesheet"
               href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"
          />
          <link rel="stylesheet" href="demo.css" />
          <link rel="stylesheet" href="iconfont.css" />
          <script src="iconfont.js"></script>
          <!-- jQuery -->
          <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
          <!-- 代码高亮 -->
          <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
          <style>
               .main .logo {
                    margin-top: 0;
                    height: auto;
               }

               .main .logo a {
                    display: flex;
                    align-items: center;
               }

               .main .logo .sub-title {
                    margin-left: 0.5em;
                    font-size: 22px;
                    color: #fff;
                    background: linear-gradient(-45deg, #3967ff, #b500fe);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
               }
          </style>
     </head>
     <body>
          <div class="main">
               <h1 class="logo">
                    <a
                         href="https://www.iconfont.cn/"
                         title="iconfont 首页"
                         target="_blank"
                    >
                         <img
                              width="200"
                              src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
                         />
                    </a>
               </h1>
               <div class="nav-tabs">
                    <ul id="tabs" class="dib-box">
                         <li class="dib active"><span>Unicode</span></li>
                         <li class="dib"><span>Font class</span></li>
                         <li class="dib"><span>Symbol</span></li>
                    </ul>

                    <a
                         href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4939759"
                         target="_blank"
                         class="nav-more"
                    >
                         查看项目
                    </a>
               </div>
               <div class="tab-container">
                    <div class="content unicode" style="display: block">
                         <ul class="icon_lists dib-box">
                              <li class="dib">
                                   <span class="icon iconfont">&#xf7f9;</span>
                                   <div class="name">gongwuduan</div>
                                   <div class="code-name">&amp;#xf7f9;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xea2b;</span>
                                   <div class="name">安全防区设置</div>
                                   <div class="code-name">&amp;#xea2b;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe6c8;</span>
                                   <div class="name">人员安全监控</div>
                                   <div class="code-name">&amp;#xe6c8;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe661;</span>
                                   <div class="name">消防安全监控</div>
                                   <div class="code-name">&amp;#xe661;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe72c;</span>
                                   <div class="name">物联传感器管理</div>
                                   <div class="code-name">&amp;#xe72c;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe6b9;</span>
                                   <div class="name">设备安全监控</div>
                                   <div class="code-name">&amp;#xe6b9;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe9b0;</span>
                                   <div class="name">三维高斯</div>
                                   <div class="code-name">&amp;#xe9b0;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe689;</span>
                                   <div class="name">code</div>
                                   <div class="code-name">&amp;#xe689;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe60e;</span>
                                   <div class="name">excel</div>
                                   <div class="code-name">&amp;#xe60e;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe60f;</span>
                                   <div class="name">pdf</div>
                                   <div class="code-name">&amp;#xe60f;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe610;</span>
                                   <div class="name">ppt</div>
                                   <div class="code-name">&amp;#xe610;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe654;</span>
                                   <div class="name">file-b-7</div>
                                   <div class="code-name">&amp;#xe654;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe6a4;</span>
                                   <div class="name">file_txt</div>
                                   <div class="code-name">&amp;#xe6a4;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe67f;</span>
                                   <div class="name">filesimg</div>
                                   <div class="code-name">&amp;#xe67f;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe617;</span>
                                   <div class="name">audio</div>
                                   <div class="code-name">&amp;#xe617;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe61b;</span>
                                   <div class="name">video</div>
                                   <div class="code-name">&amp;#xe61b;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe61d;</span>
                                   <div class="name">word</div>
                                   <div class="code-name">&amp;#xe61d;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe621;</span>
                                   <div class="name">ZIP</div>
                                   <div class="code-name">&amp;#xe621;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe683;</span>
                                   <div class="name">大修计划</div>
                                   <div class="code-name">&amp;#xe683;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe84b;</span>
                                   <div class="name">运维记录</div>
                                   <div class="code-name">&amp;#xe84b;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe6ff;</span>
                                   <div class="name">保养提醒</div>
                                   <div class="code-name">&amp;#xe6ff;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe878;</span>
                                   <div class="name">数智检测</div>
                                   <div class="code-name">&amp;#xe878;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe6df;</span>
                                   <div class="name">部门管理</div>
                                   <div class="code-name">&amp;#xe6df;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe61c;</span>
                                   <div class="name">站场管理</div>
                                   <div class="code-name">&amp;#xe61c;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe626;</span>
                                   <div class="name">报警配置</div>
                                   <div class="code-name">&amp;#xe626;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe6a0;</span>
                                   <div class="name">设备设施</div>
                                   <div class="code-name">&amp;#xe6a0;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe64b;</span>
                                   <div class="name">wzer-blue云图</div>
                                   <div class="code-name">&amp;#xe64b;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe694;</span>
                                   <div class="name">天气</div>
                                   <div class="code-name">&amp;#xe694;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe62d;</span>
                                   <div class="name">新增</div>
                                   <div class="code-name">&amp;#xe62d;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe61e;</span>
                                   <div class="name">删除</div>
                                   <div class="code-name">&amp;#xe61e;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe608;</span>
                                   <div class="name">展开</div>
                                   <div class="code-name">&amp;#xe608;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#x1008d;</span>
                                   <div class="name">收起</div>
                                   <div class="code-name">&amp;#x1008d;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe607;</span>
                                   <div class="name">线路</div>
                                   <div class="code-name">&amp;#xe607;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe6bb;</span>
                                   <div class="name">里程</div>
                                   <div class="code-name">&amp;#xe6bb;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe625;</span>
                                   <div class="name">人员</div>
                                   <div class="code-name">&amp;#xe625;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe612;</span>
                                   <div class="name">删除</div>
                                   <div class="code-name">&amp;#xe612;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#x73;</span>
                                   <div class="name">上传</div>
                                   <div class="code-name">&amp;#x73;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe80e;</span>
                                   <div class="name">事件记录</div>
                                   <div class="code-name">&amp;#xe80e;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe899;</span>
                                   <div class="name">申请销号</div>
                                   <div class="code-name">&amp;#xe899;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe624;</span>
                                   <div class="name">飞行漫游</div>
                                   <div class="code-name">&amp;#xe624;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe606;</span>
                                   <div class="name">quduan</div>
                                   <div class="code-name">&amp;#xe606;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe8c4;</span>
                                   <div class="name">定位</div>
                                   <div class="code-name">&amp;#xe8c4;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe60d;</span>
                                   <div class="name">导航</div>
                                   <div class="code-name">&amp;#xe60d;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe605;</span>
                                   <div class="name">设置</div>
                                   <div class="code-name">&amp;#xe605;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe615;</span>
                                   <div class="name">图层</div>
                                   <div class="code-name">&amp;#xe615;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe604;</span>
                                   <div class="name">车间</div>
                                   <div class="code-name">&amp;#xe604;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe68e;</span>
                                   <div class="name">高铁运行 copy</div>
                                   <div class="code-name">&amp;#xe68e;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe60a;</span>
                                   <div class="name">右箭头</div>
                                   <div class="code-name">&amp;#xe60a;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe601;</span>
                                   <div class="name">桥梁</div>
                                   <div class="code-name">&amp;#xe601;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe600;</span>
                                   <div class="name">限高架标志</div>
                                   <div class="code-name">&amp;#xe600;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe64f;</span>
                                   <div class="name">过道天桥-无服务</div>
                                   <div class="code-name">&amp;#xe64f;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe65c;</span>
                                   <div class="name">灯光</div>
                                   <div class="code-name">&amp;#xe65c;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe634;</span>
                                   <div class="name">GIS-TL_监测点</div>
                                   <div class="code-name">&amp;#xe634;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe66d;</span>
                                   <div class="name">交叉</div>
                                   <div class="code-name">&amp;#xe66d;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe69c;</span>
                                   <div class="name">管线属性</div>
                                   <div class="code-name">&amp;#xe69c;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe813;</span>
                                   <div class="name">洞室施工</div>
                                   <div class="code-name">&amp;#xe813;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe641;</span>
                                   <div class="name">-_新建斜交涵洞</div>
                                   <div class="code-name">&amp;#xe641;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe67c;</span>
                                   <div class="name">-_特殊桥墩-02</div>
                                   <div class="code-name">&amp;#xe67c;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#x1008a;</span>
                                   <div class="name">交叉</div>
                                   <div class="code-name">&amp;#x1008a;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#x1008b;</span>
                                   <div class="name">交叉</div>
                                   <div class="code-name">&amp;#x1008b;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#x1008c;</span>
                                   <div class="name">交叉</div>
                                   <div class="code-name">&amp;#x1008c;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe603;</span>
                                   <div class="name">标签_火车站</div>
                                   <div class="code-name">&amp;#xe603;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe8d4;</span>
                                   <div class="name">240显示、可见</div>
                                   <div class="code-name">&amp;#xe8d4;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe620;</span>
                                   <div class="name">wxb搜索推广</div>
                                   <div class="code-name">&amp;#xe620;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xf0cd;</span>
                                   <div class="name">合同台账</div>
                                   <div class="code-name">&amp;#xf0cd;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe64d;</span>
                                   <div class="name">编辑</div>
                                   <div class="code-name">&amp;#xe64d;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe609;</span>
                                   <div class="name">要素</div>
                                   <div class="code-name">&amp;#xe609;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe8b6;</span>
                                   <div class="name">删除</div>
                                   <div class="code-name">&amp;#xe8b6;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe64c;</span>
                                   <div class="name">车间生产</div>
                                   <div class="code-name">&amp;#xe64c;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe61f;</span>
                                   <div class="name">25_单位</div>
                                   <div class="code-name">&amp;#xe61f;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe60b;</span>
                                   <div class="name">项目类型</div>
                                   <div class="code-name">&amp;#xe60b;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe602;</span>
                                   <div class="name">时间</div>
                                   <div class="code-name">&amp;#xe602;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe614;</span>
                                   <div class="name">项目</div>
                                   <div class="code-name">&amp;#xe614;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#x10089;</span>
                                   <div class="name">完成量</div>
                                   <div class="code-name">&amp;#x10089;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe611;</span>
                                   <div class="name">详情</div>
                                   <div class="code-name">&amp;#xe611;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe659;</span>
                                   <div class="name">图表</div>
                                   <div class="code-name">&amp;#xe659;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe681;</span>
                                   <div class="name">完成</div>
                                   <div class="code-name">&amp;#xe681;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe668;</span>
                                   <div class="name">未完成</div>
                                   <div class="code-name">&amp;#xe668;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe658;</span>
                                   <div class="name">分类</div>
                                   <div class="code-name">&amp;#xe658;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe613;</span>
                                   <div class="name">添加</div>
                                   <div class="code-name">&amp;#xe613;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe62b;</span>
                                   <div class="name">任务</div>
                                   <div class="code-name">&amp;#xe62b;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe62e;</span>
                                   <div class="name">台账</div>
                                   <div class="code-name">&amp;#xe62e;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe60c;</span>
                                   <div class="name">首页</div>
                                   <div class="code-name">&amp;#xe60c;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe6b7;</span>
                                   <div class="name">数据折线图</div>
                                   <div class="code-name">&amp;#xe6b7;</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont">&#xe9e6;</span>
                                   <div class="name">生产管理</div>
                                   <div class="code-name">&amp;#xe9e6;</div>
                              </li>
                         </ul>
                         <div class="article markdown">
                              <h2 id="unicode-">Unicode 引用</h2>
                              <hr />

                              <p>
                                   Unicode
                                   是字体在网页端最原始的应用方式，特点是：
                              </p>
                              <ul>
                                   <li>
                                        支持按字体的方式去动态调整图标大小，颜色等等。
                                   </li>
                                   <li>
                                        默认情况下不支持多色，直接添加多色图标会自动去色。
                                   </li>
                              </ul>
                              <blockquote>
                                   <p>
                                        注意：新版 iconfont
                                        支持两种方式引用多色图标：SVG symbol
                                        引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
                                   </p>
                              </blockquote>
                              <p>Unicode 使用步骤如下：</p>
                              <h3 id="-font-face">
                                   第一步：拷贝项目下面生成的
                                   <code>@font-face</code>
                              </h3>
                              <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1756886270460') format('woff2'),
       url('iconfont.woff?t=1756886270460') format('woff'),
       url('iconfont.ttf?t=1756886270460') format('truetype');
}
</code></pre>
                              <h3 id="-iconfont-">
                                   第二步：定义使用 iconfont 的样式
                              </h3>
                              <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                              <h3 id="-">
                                   第三步：挑选相应图标并获取字体编码，应用于页面
                              </h3>
                              <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                              <blockquote>
                                   <p>
                                        "iconfont" 是你项目下的
                                        font-family。可以通过编辑项目查看，默认是
                                        "iconfont"。
                                   </p>
                              </blockquote>
                         </div>
                    </div>
                    <div class="content font-class">
                         <ul class="icon_lists dib-box">
                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-gongwuduan"
                                   ></span>
                                   <div class="name">gongwuduan</div>
                                   <div class="code-name">.icon-gongwuduan</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-fangquanquanshezhi"
                                   ></span>
                                   <div class="name">安全防区设置</div>
                                   <div class="code-name">
                                        .icon-fangquanquanshezhi
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-renyuananquanjiankong"
                                   ></span>
                                   <div class="name">人员安全监控</div>
                                   <div class="code-name">
                                        .icon-renyuananquanjiankong
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-xiaofanganquanjiankong"
                                   ></span>
                                   <div class="name">消防安全监控</div>
                                   <div class="code-name">
                                        .icon-xiaofanganquanjiankong
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-wulianchuanguanqiguanli"
                                   ></span>
                                   <div class="name">物联传感器管理</div>
                                   <div class="code-name">
                                        .icon-wulianchuanguanqiguanli
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shebeianquanjiankong"
                                   ></span>
                                   <div class="name">设备安全监控</div>
                                   <div class="code-name">
                                        .icon-shebeianquanjiankong
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-zuocetubiao-biaozhungaosimoxing"
                                   ></span>
                                   <div class="name">三维高斯</div>
                                   <div class="code-name">
                                        .icon-zuocetubiao-biaozhungaosimoxing
                                   </div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont icon-code"></span>
                                   <div class="name">code</div>
                                   <div class="code-name">.icon-code</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-excel"
                                   ></span>
                                   <div class="name">excel</div>
                                   <div class="code-name">.icon-excel</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont icon-pdf"></span>
                                   <div class="name">pdf</div>
                                   <div class="code-name">.icon-pdf</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont icon-ppt"></span>
                                   <div class="name">ppt</div>
                                   <div class="code-name">.icon-ppt</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont icon-file"></span>
                                   <div class="name">file-b-7</div>
                                   <div class="code-name">.icon-file</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont icon-txt"></span>
                                   <div class="name">file_txt</div>
                                   <div class="code-name">.icon-txt</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-image"
                                   ></span>
                                   <div class="name">filesimg</div>
                                   <div class="code-name">.icon-image</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-audio"
                                   ></span>
                                   <div class="name">audio</div>
                                   <div class="code-name">.icon-audio</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-video"
                                   ></span>
                                   <div class="name">video</div>
                                   <div class="code-name">.icon-video</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont icon-word"></span>
                                   <div class="name">word</div>
                                   <div class="code-name">.icon-word</div>
                              </li>

                              <li class="dib">
                                   <span class="icon iconfont icon-zip"></span>
                                   <div class="name">ZIP</div>
                                   <div class="code-name">.icon-zip</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-daxiujihua"
                                   ></span>
                                   <div class="name">大修计划</div>
                                   <div class="code-name">.icon-daxiujihua</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-yunweijilu"
                                   ></span>
                                   <div class="name">运维记录</div>
                                   <div class="code-name">.icon-yunweijilu</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-a-30-shebeibaoyangtixing"
                                   ></span>
                                   <div class="name">保养提醒</div>
                                   <div class="code-name">
                                        .icon-a-30-shebeibaoyangtixing
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-AIjiance"
                                   ></span>
                                   <div class="name">数智检测</div>
                                   <div class="code-name">.icon-AIjiance</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-bumen"
                                   ></span>
                                   <div class="name">部门管理</div>
                                   <div class="code-name">.icon-bumen</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-chukuguanli"
                                   ></span>
                                   <div class="name">站场管理</div>
                                   <div class="code-name">
                                        .icon-chukuguanli
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-lishibaojingbeifen"
                                   ></span>
                                   <div class="name">报警配置</div>
                                   <div class="code-name">
                                        .icon-lishibaojingbeifen
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shebei"
                                   ></span>
                                   <div class="name">设备设施</div>
                                   <div class="code-name">.icon-shebei</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-wzer-blueyuntu"
                                   ></span>
                                   <div class="name">wzer-blue云图</div>
                                   <div class="code-name">
                                        .icon-wzer-blueyuntu
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-tianqi"
                                   ></span>
                                   <div class="name">天气</div>
                                   <div class="code-name">.icon-tianqi</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-xinzeng"
                                   ></span>
                                   <div class="name">新增</div>
                                   <div class="code-name">.icon-xinzeng</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shanchu2"
                                   ></span>
                                   <div class="name">删除</div>
                                   <div class="code-name">.icon-shanchu2</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-zhankai"
                                   ></span>
                                   <div class="name">展开</div>
                                   <div class="code-name">.icon-zhankai</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shouqi-copy"
                                   ></span>
                                   <div class="name">收起</div>
                                   <div class="code-name">
                                        .icon-shouqi-copy
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-xianlu"
                                   ></span>
                                   <div class="name">线路</div>
                                   <div class="code-name">.icon-xianlu</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-licheng"
                                   ></span>
                                   <div class="name">里程</div>
                                   <div class="code-name">.icon-licheng</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-fl-renyuan"
                                   ></span>
                                   <div class="name">人员</div>
                                   <div class="code-name">.icon-fl-renyuan</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shanchu1"
                                   ></span>
                                   <div class="name">删除</div>
                                   <div class="code-name">.icon-shanchu1</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shangchuan"
                                   ></span>
                                   <div class="name">上传</div>
                                   <div class="code-name">.icon-shangchuan</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shijianjilu"
                                   ></span>
                                   <div class="name">事件记录</div>
                                   <div class="code-name">
                                        .icon-shijianjilu
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shenqingxiaohao"
                                   ></span>
                                   <div class="name">申请销号</div>
                                   <div class="code-name">
                                        .icon-shenqingxiaohao
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-feixingmanyou"
                                   ></span>
                                   <div class="name">飞行漫游</div>
                                   <div class="code-name">
                                        .icon-feixingmanyou
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-quduan"
                                   ></span>
                                   <div class="name">quduan</div>
                                   <div class="code-name">.icon-quduan</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-dingwei"
                                   ></span>
                                   <div class="name">定位</div>
                                   <div class="code-name">.icon-dingwei</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-daohang"
                                   ></span>
                                   <div class="name">导航</div>
                                   <div class="code-name">.icon-daohang</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shezhi"
                                   ></span>
                                   <div class="name">设置</div>
                                   <div class="code-name">.icon-shezhi</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-layer"
                                   ></span>
                                   <div class="name">图层</div>
                                   <div class="code-name">.icon-layer</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-chejian3"
                                   ></span>
                                   <div class="name">车间</div>
                                   <div class="code-name">.icon-chejian3</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-gaotieyunhangcopy"
                                   ></span>
                                   <div class="name">高铁运行 copy</div>
                                   <div class="code-name">
                                        .icon-gaotieyunhangcopy
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-youjiantou"
                                   ></span>
                                   <div class="name">右箭头</div>
                                   <div class="code-name">.icon-youjiantou</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-qiaoliang"
                                   ></span>
                                   <div class="name">桥梁</div>
                                   <div class="code-name">.icon-qiaoliang</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-xiangaojiabiaozhi"
                                   ></span>
                                   <div class="name">限高架标志</div>
                                   <div class="code-name">
                                        .icon-xiangaojiabiaozhi
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-guodaotianqiao-wufuwu-"
                                   ></span>
                                   <div class="name">过道天桥-无服务</div>
                                   <div class="code-name">
                                        .icon-guodaotianqiao-wufuwu-
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-dengguang"
                                   ></span>
                                   <div class="name">灯光</div>
                                   <div class="code-name">.icon-dengguang</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-GIS-TL_jiancedian"
                                   ></span>
                                   <div class="name">GIS-TL_监测点</div>
                                   <div class="code-name">
                                        .icon-GIS-TL_jiancedian
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-jiaocha"
                                   ></span>
                                   <div class="name">交叉</div>
                                   <div class="code-name">.icon-jiaocha</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-guanxianshuxing"
                                   ></span>
                                   <div class="name">管线属性</div>
                                   <div class="code-name">
                                        .icon-guanxianshuxing
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-dongshishigong"
                                   ></span>
                                   <div class="name">洞室施工</div>
                                   <div class="code-name">
                                        .icon-dongshishigong
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon--_xinjianxiejiaohandong"
                                   ></span>
                                   <div class="name">-_新建斜交涵洞</div>
                                   <div class="code-name">
                                        .icon--_xinjianxiejiaohandong
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon--_teshuqiaodun-02"
                                   ></span>
                                   <div class="name">-_特殊桥墩-02</div>
                                   <div class="code-name">
                                        .icon--_teshuqiaodun-02
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-jiaocha-copy"
                                   ></span>
                                   <div class="name">交叉</div>
                                   <div class="code-name">
                                        .icon-jiaocha-copy
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-jiaocha-copy1"
                                   ></span>
                                   <div class="name">交叉</div>
                                   <div class="code-name">
                                        .icon-jiaocha-copy1
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-jiaocha-copy2"
                                   ></span>
                                   <div class="name">交叉</div>
                                   <div class="code-name">
                                        .icon-jiaocha-copy2
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-biaoqian_huochezhan"
                                   ></span>
                                   <div class="name">标签_火车站</div>
                                   <div class="code-name">
                                        .icon-biaoqian_huochezhan
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-xianshikejian"
                                   ></span>
                                   <div class="name">240显示、可见</div>
                                   <div class="code-name">
                                        .icon-xianshikejian
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-wxbsousuotuiguang"
                                   ></span>
                                   <div class="name">wxb搜索推广</div>
                                   <div class="code-name">
                                        .icon-wxbsousuotuiguang
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-hetongtaizhang"
                                   ></span>
                                   <div class="name">合同台账</div>
                                   <div class="code-name">
                                        .icon-hetongtaizhang
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-bianji"
                                   ></span>
                                   <div class="name">编辑</div>
                                   <div class="code-name">.icon-bianji</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-yaosu1"
                                   ></span>
                                   <div class="name">要素</div>
                                   <div class="code-name">.icon-yaosu1</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shanchu"
                                   ></span>
                                   <div class="name">删除</div>
                                   <div class="code-name">.icon-shanchu</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-a-workshopproduction"
                                   ></span>
                                   <div class="name">车间生产</div>
                                   <div class="code-name">
                                        .icon-a-workshopproduction
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-25_danwei"
                                   ></span>
                                   <div class="name">25_单位</div>
                                   <div class="code-name">.icon-25_danwei</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-xiangmuleixing"
                                   ></span>
                                   <div class="name">项目类型</div>
                                   <div class="code-name">
                                        .icon-xiangmuleixing
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shijian"
                                   ></span>
                                   <div class="name">时间</div>
                                   <div class="code-name">.icon-shijian</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-xiangmu"
                                   ></span>
                                   <div class="name">项目</div>
                                   <div class="code-name">.icon-xiangmu</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-wanchengliang"
                                   ></span>
                                   <div class="name">完成量</div>
                                   <div class="code-name">
                                        .icon-wanchengliang
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-xiangqing"
                                   ></span>
                                   <div class="name">详情</div>
                                   <div class="code-name">.icon-xiangqing</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-tubiao"
                                   ></span>
                                   <div class="name">图表</div>
                                   <div class="code-name">.icon-tubiao</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-wancheng"
                                   ></span>
                                   <div class="name">完成</div>
                                   <div class="code-name">.icon-wancheng</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-weiwancheng"
                                   ></span>
                                   <div class="name">未完成</div>
                                   <div class="code-name">
                                        .icon-weiwancheng
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-fenlei"
                                   ></span>
                                   <div class="name">分类</div>
                                   <div class="code-name">.icon-fenlei</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-tianjia"
                                   ></span>
                                   <div class="name">添加</div>
                                   <div class="code-name">.icon-tianjia</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-renwu"
                                   ></span>
                                   <div class="name">任务</div>
                                   <div class="code-name">.icon-renwu</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-taizhang"
                                   ></span>
                                   <div class="name">台账</div>
                                   <div class="code-name">.icon-taizhang</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shouye"
                                   ></span>
                                   <div class="name">首页</div>
                                   <div class="code-name">.icon-shouye</div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shujuzhexiantu"
                                   ></span>
                                   <div class="name">数据折线图</div>
                                   <div class="code-name">
                                        .icon-shujuzhexiantu
                                   </div>
                              </li>

                              <li class="dib">
                                   <span
                                        class="icon iconfont icon-shengchanguanli"
                                   ></span>
                                   <div class="name">生产管理</div>
                                   <div class="code-name">
                                        .icon-shengchanguanli
                                   </div>
                              </li>
                         </ul>
                         <div class="article markdown">
                              <h2 id="font-class-">font-class 引用</h2>
                              <hr />

                              <p>
                                   font-class 是 Unicode
                                   使用方式的一种变种，主要是解决 Unicode
                                   书写不直观，语意不明确的问题。
                              </p>
                              <p>与 Unicode 使用方式相比，具有如下特点：</p>
                              <ul>
                                   <li>
                                        相比于 Unicode
                                        语意明确，书写更直观。可以很容易分辨这个
                                        icon 是什么。
                                   </li>
                                   <li>
                                        因为使用 class
                                        来定义图标，所以当要替换图标时，只需要修改
                                        class 里面的 Unicode 引用。
                                   </li>
                              </ul>
                              <p>使用步骤如下：</p>
                              <h3 id="-fontclass-">
                                   第一步：引入项目下面生成的 fontclass 代码：
                              </h3>
                              <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                              <h3 id="-">
                                   第二步：挑选相应图标并获取类名，应用于页面：
                              </h3>
                              <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
                              <blockquote>
                                   <p>
                                        " iconfont" 是你项目下的
                                        font-family。可以通过编辑项目查看，默认是
                                        "iconfont"。
                                   </p>
                              </blockquote>
                         </div>
                    </div>
                    <div class="content symbol">
                         <ul class="icon_lists dib-box">
                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-gongwuduan"
                                        ></use>
                                   </svg>
                                   <div class="name">gongwuduan</div>
                                   <div class="code-name">#icon-gongwuduan</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-fangquanquanshezhi"
                                        ></use>
                                   </svg>
                                   <div class="name">安全防区设置</div>
                                   <div class="code-name">
                                        #icon-fangquanquanshezhi
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-renyuananquanjiankong"
                                        ></use>
                                   </svg>
                                   <div class="name">人员安全监控</div>
                                   <div class="code-name">
                                        #icon-renyuananquanjiankong
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-xiaofanganquanjiankong"
                                        ></use>
                                   </svg>
                                   <div class="name">消防安全监控</div>
                                   <div class="code-name">
                                        #icon-xiaofanganquanjiankong
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-wulianchuanguanqiguanli"
                                        ></use>
                                   </svg>
                                   <div class="name">物联传感器管理</div>
                                   <div class="code-name">
                                        #icon-wulianchuanguanqiguanli
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-shebeianquanjiankong"
                                        ></use>
                                   </svg>
                                   <div class="name">设备安全监控</div>
                                   <div class="code-name">
                                        #icon-shebeianquanjiankong
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-zuocetubiao-biaozhungaosimoxing"
                                        ></use>
                                   </svg>
                                   <div class="name">三维高斯</div>
                                   <div class="code-name">
                                        #icon-zuocetubiao-biaozhungaosimoxing
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-code"></use>
                                   </svg>
                                   <div class="name">code</div>
                                   <div class="code-name">#icon-code</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-excel"></use>
                                   </svg>
                                   <div class="name">excel</div>
                                   <div class="code-name">#icon-excel</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-pdf"></use>
                                   </svg>
                                   <div class="name">pdf</div>
                                   <div class="code-name">#icon-pdf</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-ppt"></use>
                                   </svg>
                                   <div class="name">ppt</div>
                                   <div class="code-name">#icon-ppt</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-file"></use>
                                   </svg>
                                   <div class="name">file-b-7</div>
                                   <div class="code-name">#icon-file</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-txt"></use>
                                   </svg>
                                   <div class="name">file_txt</div>
                                   <div class="code-name">#icon-txt</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-image"></use>
                                   </svg>
                                   <div class="name">filesimg</div>
                                   <div class="code-name">#icon-image</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-audio"></use>
                                   </svg>
                                   <div class="name">audio</div>
                                   <div class="code-name">#icon-audio</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-video"></use>
                                   </svg>
                                   <div class="name">video</div>
                                   <div class="code-name">#icon-video</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-word"></use>
                                   </svg>
                                   <div class="name">word</div>
                                   <div class="code-name">#icon-word</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-zip"></use>
                                   </svg>
                                   <div class="name">ZIP</div>
                                   <div class="code-name">#icon-zip</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-daxiujihua"
                                        ></use>
                                   </svg>
                                   <div class="name">大修计划</div>
                                   <div class="code-name">#icon-daxiujihua</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-yunweijilu"
                                        ></use>
                                   </svg>
                                   <div class="name">运维记录</div>
                                   <div class="code-name">#icon-yunweijilu</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-a-30-shebeibaoyangtixing"
                                        ></use>
                                   </svg>
                                   <div class="name">保养提醒</div>
                                   <div class="code-name">
                                        #icon-a-30-shebeibaoyangtixing
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-AIjiance"></use>
                                   </svg>
                                   <div class="name">数智检测</div>
                                   <div class="code-name">#icon-AIjiance</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-bumen"></use>
                                   </svg>
                                   <div class="name">部门管理</div>
                                   <div class="code-name">#icon-bumen</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-chukuguanli"
                                        ></use>
                                   </svg>
                                   <div class="name">站场管理</div>
                                   <div class="code-name">
                                        #icon-chukuguanli
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-lishibaojingbeifen"
                                        ></use>
                                   </svg>
                                   <div class="name">报警配置</div>
                                   <div class="code-name">
                                        #icon-lishibaojingbeifen
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-shebei"></use>
                                   </svg>
                                   <div class="name">设备设施</div>
                                   <div class="code-name">#icon-shebei</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-wzer-blueyuntu"
                                        ></use>
                                   </svg>
                                   <div class="name">wzer-blue云图</div>
                                   <div class="code-name">
                                        #icon-wzer-blueyuntu
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-tianqi"></use>
                                   </svg>
                                   <div class="name">天气</div>
                                   <div class="code-name">#icon-tianqi</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-xinzeng"></use>
                                   </svg>
                                   <div class="name">新增</div>
                                   <div class="code-name">#icon-xinzeng</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-shanchu2"></use>
                                   </svg>
                                   <div class="name">删除</div>
                                   <div class="code-name">#icon-shanchu2</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-zhankai"></use>
                                   </svg>
                                   <div class="name">展开</div>
                                   <div class="code-name">#icon-zhankai</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-shouqi-copy"
                                        ></use>
                                   </svg>
                                   <div class="name">收起</div>
                                   <div class="code-name">
                                        #icon-shouqi-copy
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-xianlu"></use>
                                   </svg>
                                   <div class="name">线路</div>
                                   <div class="code-name">#icon-xianlu</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-licheng"></use>
                                   </svg>
                                   <div class="name">里程</div>
                                   <div class="code-name">#icon-licheng</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-fl-renyuan"
                                        ></use>
                                   </svg>
                                   <div class="name">人员</div>
                                   <div class="code-name">#icon-fl-renyuan</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-shanchu1"></use>
                                   </svg>
                                   <div class="name">删除</div>
                                   <div class="code-name">#icon-shanchu1</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-shangchuan"
                                        ></use>
                                   </svg>
                                   <div class="name">上传</div>
                                   <div class="code-name">#icon-shangchuan</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-shijianjilu"
                                        ></use>
                                   </svg>
                                   <div class="name">事件记录</div>
                                   <div class="code-name">
                                        #icon-shijianjilu
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-shenqingxiaohao"
                                        ></use>
                                   </svg>
                                   <div class="name">申请销号</div>
                                   <div class="code-name">
                                        #icon-shenqingxiaohao
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-feixingmanyou"
                                        ></use>
                                   </svg>
                                   <div class="name">飞行漫游</div>
                                   <div class="code-name">
                                        #icon-feixingmanyou
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-quduan"></use>
                                   </svg>
                                   <div class="name">quduan</div>
                                   <div class="code-name">#icon-quduan</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-dingwei"></use>
                                   </svg>
                                   <div class="name">定位</div>
                                   <div class="code-name">#icon-dingwei</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-daohang"></use>
                                   </svg>
                                   <div class="name">导航</div>
                                   <div class="code-name">#icon-daohang</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-shezhi"></use>
                                   </svg>
                                   <div class="name">设置</div>
                                   <div class="code-name">#icon-shezhi</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-layer"></use>
                                   </svg>
                                   <div class="name">图层</div>
                                   <div class="code-name">#icon-layer</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-chejian3"></use>
                                   </svg>
                                   <div class="name">车间</div>
                                   <div class="code-name">#icon-chejian3</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-gaotieyunhangcopy"
                                        ></use>
                                   </svg>
                                   <div class="name">高铁运行 copy</div>
                                   <div class="code-name">
                                        #icon-gaotieyunhangcopy
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-youjiantou"
                                        ></use>
                                   </svg>
                                   <div class="name">右箭头</div>
                                   <div class="code-name">#icon-youjiantou</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-qiaoliang"></use>
                                   </svg>
                                   <div class="name">桥梁</div>
                                   <div class="code-name">#icon-qiaoliang</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-xiangaojiabiaozhi"
                                        ></use>
                                   </svg>
                                   <div class="name">限高架标志</div>
                                   <div class="code-name">
                                        #icon-xiangaojiabiaozhi
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-guodaotianqiao-wufuwu-"
                                        ></use>
                                   </svg>
                                   <div class="name">过道天桥-无服务</div>
                                   <div class="code-name">
                                        #icon-guodaotianqiao-wufuwu-
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-dengguang"></use>
                                   </svg>
                                   <div class="name">灯光</div>
                                   <div class="code-name">#icon-dengguang</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-GIS-TL_jiancedian"
                                        ></use>
                                   </svg>
                                   <div class="name">GIS-TL_监测点</div>
                                   <div class="code-name">
                                        #icon-GIS-TL_jiancedian
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-jiaocha"></use>
                                   </svg>
                                   <div class="name">交叉</div>
                                   <div class="code-name">#icon-jiaocha</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-guanxianshuxing"
                                        ></use>
                                   </svg>
                                   <div class="name">管线属性</div>
                                   <div class="code-name">
                                        #icon-guanxianshuxing
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-dongshishigong"
                                        ></use>
                                   </svg>
                                   <div class="name">洞室施工</div>
                                   <div class="code-name">
                                        #icon-dongshishigong
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon--_xinjianxiejiaohandong"
                                        ></use>
                                   </svg>
                                   <div class="name">-_新建斜交涵洞</div>
                                   <div class="code-name">
                                        #icon--_xinjianxiejiaohandong
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon--_teshuqiaodun-02"
                                        ></use>
                                   </svg>
                                   <div class="name">-_特殊桥墩-02</div>
                                   <div class="code-name">
                                        #icon--_teshuqiaodun-02
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-jiaocha-copy"
                                        ></use>
                                   </svg>
                                   <div class="name">交叉</div>
                                   <div class="code-name">
                                        #icon-jiaocha-copy
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-jiaocha-copy1"
                                        ></use>
                                   </svg>
                                   <div class="name">交叉</div>
                                   <div class="code-name">
                                        #icon-jiaocha-copy1
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-jiaocha-copy2"
                                        ></use>
                                   </svg>
                                   <div class="name">交叉</div>
                                   <div class="code-name">
                                        #icon-jiaocha-copy2
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-biaoqian_huochezhan"
                                        ></use>
                                   </svg>
                                   <div class="name">标签_火车站</div>
                                   <div class="code-name">
                                        #icon-biaoqian_huochezhan
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-xianshikejian"
                                        ></use>
                                   </svg>
                                   <div class="name">240显示、可见</div>
                                   <div class="code-name">
                                        #icon-xianshikejian
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-wxbsousuotuiguang"
                                        ></use>
                                   </svg>
                                   <div class="name">wxb搜索推广</div>
                                   <div class="code-name">
                                        #icon-wxbsousuotuiguang
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-hetongtaizhang"
                                        ></use>
                                   </svg>
                                   <div class="name">合同台账</div>
                                   <div class="code-name">
                                        #icon-hetongtaizhang
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-bianji"></use>
                                   </svg>
                                   <div class="name">编辑</div>
                                   <div class="code-name">#icon-bianji</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-yaosu1"></use>
                                   </svg>
                                   <div class="name">要素</div>
                                   <div class="code-name">#icon-yaosu1</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-shanchu"></use>
                                   </svg>
                                   <div class="name">删除</div>
                                   <div class="code-name">#icon-shanchu</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-a-workshopproduction"
                                        ></use>
                                   </svg>
                                   <div class="name">车间生产</div>
                                   <div class="code-name">
                                        #icon-a-workshopproduction
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-25_danwei"></use>
                                   </svg>
                                   <div class="name">25_单位</div>
                                   <div class="code-name">#icon-25_danwei</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-xiangmuleixing"
                                        ></use>
                                   </svg>
                                   <div class="name">项目类型</div>
                                   <div class="code-name">
                                        #icon-xiangmuleixing
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-shijian"></use>
                                   </svg>
                                   <div class="name">时间</div>
                                   <div class="code-name">#icon-shijian</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-xiangmu"></use>
                                   </svg>
                                   <div class="name">项目</div>
                                   <div class="code-name">#icon-xiangmu</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-wanchengliang"
                                        ></use>
                                   </svg>
                                   <div class="name">完成量</div>
                                   <div class="code-name">
                                        #icon-wanchengliang
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-xiangqing"></use>
                                   </svg>
                                   <div class="name">详情</div>
                                   <div class="code-name">#icon-xiangqing</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-tubiao"></use>
                                   </svg>
                                   <div class="name">图表</div>
                                   <div class="code-name">#icon-tubiao</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-wancheng"></use>
                                   </svg>
                                   <div class="name">完成</div>
                                   <div class="code-name">#icon-wancheng</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-weiwancheng"
                                        ></use>
                                   </svg>
                                   <div class="name">未完成</div>
                                   <div class="code-name">
                                        #icon-weiwancheng
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-fenlei"></use>
                                   </svg>
                                   <div class="name">分类</div>
                                   <div class="code-name">#icon-fenlei</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-tianjia"></use>
                                   </svg>
                                   <div class="name">添加</div>
                                   <div class="code-name">#icon-tianjia</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-renwu"></use>
                                   </svg>
                                   <div class="name">任务</div>
                                   <div class="code-name">#icon-renwu</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-taizhang"></use>
                                   </svg>
                                   <div class="name">台账</div>
                                   <div class="code-name">#icon-taizhang</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use xlink:href="#icon-shouye"></use>
                                   </svg>
                                   <div class="name">首页</div>
                                   <div class="code-name">#icon-shouye</div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-shujuzhexiantu"
                                        ></use>
                                   </svg>
                                   <div class="name">数据折线图</div>
                                   <div class="code-name">
                                        #icon-shujuzhexiantu
                                   </div>
                              </li>

                              <li class="dib">
                                   <svg
                                        class="icon svg-icon"
                                        aria-hidden="true"
                                   >
                                        <use
                                             xlink:href="#icon-shengchanguanli"
                                        ></use>
                                   </svg>
                                   <div class="name">生产管理</div>
                                   <div class="code-name">
                                        #icon-shengchanguanli
                                   </div>
                              </li>
                         </ul>
                         <div class="article markdown">
                              <h2 id="symbol-">Symbol 引用</h2>
                              <hr />

                              <p>
                                   这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇
                                   <a href="">文章</a>
                                   这种用法其实是做了一个 SVG
                                   的集合，与另外两种相比具有如下特点：
                              </p>
                              <ul>
                                   <li>支持多色图标了，不再受单色限制。</li>
                                   <li>
                                        通过一些技巧，支持像字体那样，通过
                                        <code>font-size</code>
                                        ,
                                        <code>color</code>
                                        来调整样式。
                                   </li>
                                   <li>
                                        兼容性较差，支持 IE9+，及现代浏览器。
                                   </li>
                                   <li>
                                        浏览器渲染 SVG 的性能一般，还不如 png。
                                   </li>
                              </ul>
                              <p>使用步骤如下：</p>
                              <h3 id="-symbol-">
                                   第一步：引入项目下面生成的 symbol 代码：
                              </h3>
                              <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                              <h3 id="-css-">
                                   第二步：加入通用 CSS 代码（引入一次就行）：
                              </h3>
                              <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                              <h3 id="-">
                                   第三步：挑选相应图标并获取类名，应用于页面：
                              </h3>
                              <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
                         </div>
                    </div>
               </div>
          </div>
          <script>
               $(document).ready(function () {
                    $('.tab-container .content:first').show()

                    $('#tabs li').click(function (e) {
                         var tabContent = $('.tab-container .content')
                         var index = $(this).index()

                         if ($(this).hasClass('active')) {
                              return
                         } else {
                              $('#tabs li').removeClass('active')
                              $(this).addClass('active')

                              tabContent.hide().eq(index).fadeIn()
                         }
                    })
               })
          </script>
     </body>
</html>
